revision:
<div class="spec">
<fieldset>
<legend>E-voting System </legend>
<table border="1">
<tr>
<td>First name:</td>
<td><input type="text" placeholder="First Name" required></td>
</tr>
<tr>
<td>Last Name:</td>
<td><input type="text" placeholder="Last Name" requited></td>
</tr>
<tr>
<td>address:</td>
<td input type="text"placeholder="address"></td>
</tr>
<tr>
<td>Candidate Name:</td>
<td>
<select name="" id="">
<option>Courtois Thibaut</option>
<option value="">Hazard Eden</option>
<option value="">De Bruyne Kevin</option>
<option value="">Lukaku Romulu</option>
<option value=""></option>
</select>
</td>
</tr>
<td>Team:</td>
<td>
<select name="" id="">
<option value="">Real Madrid</option>
<option value="">Manchester City</option>
<option value="">Chelsea</option>
</select>
</td>
<tr>
<td>Sex:</td>
<td>
<input type="radio">Male
<input type="radio">Female
</td>
</tr>
</table>
<input type="submit">
</fieldset>
<style>
#fieldset_one{width: 30vw; margin: 0 auto;}
</style>
<fieldset id="fieldset_two">
<legend> E-Voting System</legend>
<table border="1">
<tr><td>First Name<td><input type="text"></td></tr>
<tr><td>Last Name</td><td><input type="text"></td></tr>
<tr><td>Address</td><td><input type="text"></td></tr>
<tr>
<td> Candidate Name</td>
<td>
<select>
<option>Name1</option>
<option>Name2</option>
<option>Name3</option>
<option>Name4</option>
<option>Name5</option>
<option>Name6</option>
</select>
</td>
</tr>
<td>Party</td>
<td>
<select>
<option>Party 1</option>
<option>Party 2</option>
<option>Party 3</option>
<option>Party 4</option>
<option>Party 5</option>
<option>Party 6</option>
</select>
</td>
</tr>
<tr>
<td>Sex</td><td><input type="radio" name="e">Male<input type="radio" name="e">Female</td></tr><br><br>
</td>
</tr>
</table>
<input type="submit" value="Submit"/>
</fieldset>
<style>
#fieldset_two{width: 30vw; height: 18vw; margin: 0 auto;}
</style>
<div class="spec">
<form id="form">
<div class="form-control">
<label for="name" id="label-name">Name: </label>
<input type="text" id="name" placeholder="Enter your name" />
</div>
<div class="form-control">
<label for="email" id="label-email">Email: </label>
<input type="email" id="email" placeholder="Enter your email" />
</div>
<div class="form-control">
<label for="age" id="label-age">Age: </label>
<input type="text" id="age" placeholder="Enter your age" />
</div>
<div class="form-control">
<label for="role" id="label-role"> Which option best describes you?
</label>
<select name="role" id="role">
<option value="student">Student</option>
<option value="intern">Intern</option>
<option value="professional">Professional</option>
<option value="other">Other</option>
</select>
</div>
<div class="form-control">
<label> Would you recommed this website to a friend?</label>
<label for="recommed-1"><input type="radio" id="recommed-1" name="recommed">Yes</input></label>
<label for="recommed-2"><input type="radio" id="recommed-2" name="recommed">No</input></label>
<label for="recommed-3"><input type="radio" id="recommed-3" name="recommed">Maybe</input></label>
</div>
<div class="form-control">
<label>Languages and Frameworks known<small>(Check all that apply)</small></label>
<label for="inp-1"><input type="checkbox" name="inp">C</input></label>
<label for="inp-2"><input type="checkbox" name="inp">C++</input></label>
<label for="inp-3"><input type="checkbox" name="inp">C#</input></label>
<label for="inp-4"><input type="checkbox" name="inp">Java</input></label>
<label for="inp-5"><input type="checkbox" name="inp">Python</input></label>
<label for="inp-6"><input type="checkbox" name="inp">JavaScript</input></label>
<label for="inp-7"><input type="checkbox" name="inp">React</input></label>
<label for="inp-7"><input type="checkbox" name="inp">Angular</input></label>
<label for="inp-7"><input type="checkbox" name="inp">Django</input></label>
<label for="inp-7"><input type="checkbox" name="inp">Spring</input></label>
</div>
<div class="form-control">
<label for="comment">Any comments or suggestions</label>
<textarea name="comment" id="comment" placeholder="Enter your comment here"></textarea>
</div>
<button type="submit" value="submit">Submit</button>
</form>
</div>
<style>
form {background-color: lightgrey; max-width: 50vw;margin: 5vw auto; padding: 3vw 2vw; box-shadow: 0.2vw 0.5vw 1vw rgba(0, 0, 0, 0.5);}
.form-control {text-align: left; margin-bottom: 1vw;}
.form-control label {display: block; margin-bottom: 0.5vw;}
.form-control input, .form-control select, .form-control textarea { border: 1px solid darkgrey; border-radius: 1.5vw; font-family: inherit; padding: 0.5vw; display: block; width: 95%;}
.form-control input[type="radio"], .form-control input[type="checkbox"] { display: inline-block; width: auto;}
button {background-color: #05c46b; border: 1px solid darkgrey; border-radius: 1vw; font-family: inherit; font-size: 1.5vw; display: block; width: 80%; margin-top: 4vw;margin-bottom: 2vw;}
</style>
<div class="main-block">
<form class="two"action="/">
<h4>Course evaluation survey</h4>
<h5>Course</h5><input type="text"/>
<h5>Instructor</h5><input type="text"/>
<h5>Term and Year</h5><input type="text"/>
<h6>Teaching approaches</h6>
<div>
<h5>Untitled</h5>
<table>
<tr>
<th class="first-col" class="th"></th>
<th class="th">Strongly Disagree</th>
<th class="th">Disagree</th>
<th class="th">Neutral</th>
<th class="th">Agree</th>
<th class="th">Strongly Agree</th>
</tr>
<tr>
<td class="first-col" class="td">1. The instructor stimulated my interest in the subject.</td>
<td><input type="radio" value="none" name="interest" class="td" /></td>
<td><input type="radio" value="none" name="interest" class="td" /></td>
<td><input type="radio" value="none" name="interest" class="td" /></td>
<td><input type="radio" value="none" name="interest" class="td" /></td>
<td><input type="radio" value="none" name="interest" class="td" /></td>
</tr>
<tr>
<td class="first-col" class="td">2. The instructor managed classroom time and pace well.</td>
<td><input type="radio" value="none" name="managed" class="td" /></td>
<td><input type="radio" value="none" name="managed" class="td" /></td>
<td><input type="radio" value="none" name="managed" class="td" /></td>
<td><input type="radio" value="none" name="managed" class="td" /></td>
<td><input type="radio" value="none" name="managed" class="td" /></td>
</tr>
<tr>
<td class="first-col" class="td">3. The instructor was organized and prepared for every class</td>
<td><input type="radio" value="none" name="organized" class="td" /></td>
<td><input type="radio" value="none" name="organized" class="td" /></td>
<td><input type="radio" value="none" name="organized" class="td" /></td>
<td><input type="radio" value="none" name="organized" class="td" /></td>
<td><input type="radio" value="none" name="organized" class="td" /></td>
</tr>
<tr>
<td class="first-col">4. The instructor encouraged discussions and responded to questions.</td>
<td><input type="radio" value="none" name="encouraged" class="td" /></td>
<td><input type="radio" value="none" name="encouraged" class="td" /></td>
<td><input type="radio" value="none" name="encouraged" class="td" /></td>
<td><input type="radio" value="none" name="encouraged" class="td" /></td>
<td><input type="radio" value="none" name="encouraged" class="td" /></td>
</tr>
<tr>
<td class="first-col" class="td">5. The instructor demonstrated in-depth knowledge of the subject.</td>
<td><input type="radio" value="none" name="demonstrated" class="td" /></td>
<td><input type="radio" value="none" name="demonstrated" class="td" /></td>
<td><input type="radio" value="none" name="demonstrated" class="td" /></td>
<td><input type="radio" value="none" name="demonstrated" class="td" /></td>
<td><input type="radio" value="none" name="demonstrated" class="td" /></td>
</tr>
<tr>
<td class="first-col" class="td">6. The instructor appeared enthusiastic and interested.</td>
<td><input type="radio" value="none" name="appeared" class="td" /></td>
<td><input type="radio" value="none" name="appeared" class="td" /></td>
<td><input type="radio" value="none" name="appeared" class="td" /></td>
<td><input type="radio" value="none" name="appeared" class="td" /></td>
<td><input type="radio" value="none" name="appeared" class="td" /></td>
</tr>
<tr>
<td class="first-col" class="td">7. The instructor used a variety of instructional methods to reach the course objectives (e.g. group discussions, student presentations, etc.)</td>
<td><input type="radio" value="none" name="used" class="td" /></td>
<td><input type="radio" value="none" name="used" class="td" /></td>
<td><input type="radio" value="none" name="used" class="td" /></td>
<td><input type="radio" value="none" name="used" class="td" /></td>
<td><input type="radio" value="none" name="used" class="td" /></td>
</tr>
<tr>
<td class="first-col" class="td">8. The instructor challenged students to do their best work.</td>
<td><input type="radio" value="none" name="challenged" class="td" /></td>
<td><input type="radio" value="none" name="challenged" class="td" /></td>
<td><input type="radio" value="none" name="challenged" class="td" /></td>
<td><input type="radio" value="none" name="challenged" class="td" /></td>
<td><input type="radio" value="none" name="challenged" class="td" /></td>
</tr>
</table>
</div>
<p class="spec question">9. The instructor was accessible outside of class.</p>
<div class="question-answer">
<label><input type="radio" value="none" name="accessible" /> yes</label>
<label><input type="radio" value="none" name="accessible" /> no</label>
</div>
<p class="spec question">10. Did the instructor actively attempt to prevent cheating in this course?</p>
<div class="question-answer">
<label><input type="radio" value="none" name="actively" /> yes</label>
<label><input type="radio" value="none" name="actively" /> no</label>
</div>
<p class="spec comments">Comments</p>
<textarea rows="5"></textarea>
<h6>Feedback and assessment</h6>
<div>
<h4>Untitled</h4>
<table>
<tr>
<th class="first-col" class="th"></th>
<th class="th">Strongly Disagree</th>
<th class="th">Disagree</th>
<th class="th">Neutral</th>
<th class="th">Agree</th>
<th class="th">Strongly Agree</th>
</tr>
<tr>
<td class="first-col" class="td">11. Information about the assessment was communicated clearly</td>
<td><input type="radio" value="none" name="clearly" class="td" /></td>
<td><input type="radio" value="none" name="clearly" class="td" /></td>
<td><input type="radio" value="none" name="clearly" class="td" /></td>
<td><input type="radio" value="none" name="clearly" class="td" /></td>
<td><input type="radio" value="none" name="clearly" class="td" /></td>
</tr>
<tr>
<td class="first-col" class="td">12. Feedback was provided within the stated timeframe.</td>
<td><input type="radio" value="none" name="provided" class="td" /></td>
<td><input type="radio" value="none" name="provided" class="td" /></td>
<td><input type="radio" value="none" name="provided" class="td" /></td>
<td><input type="radio" value="none" name="provided" class="td" /></td>
<td><input type="radio" value="none" name="provided" class="td" /></td>
</tr>
<tr>
<td class="first-col" class="td">13. Feedback showed how to improve my work (e .g. corrections including comments).</td>
<td><input type="radio" value="none" name="showed" class="td" /></td>
<td><input type="radio" value="none" name="showed" class="td" /></td>
<td><input type="radio" value="none" name="showed" class="td" /></td>
<td><input type="radio" value="none" name="showed" class="td" /></td>
<td><input type="radio" value="none" name="showed" class="td" /></td>
</tr>
</table>
</div>
<p class="spec comments">Comments</p>
<textarea rows="5"></textarea>
<h6>Resources and administration</h6>
<div>
<h5>Untitled</h5>
<table>
<tr>
<th class="first-col" class="th"></th>
<th class="th">Strongly Disagree</th>
<th class="th">Disagree</th>
<th class="th">Neutral</th>
<th class="th">Agree</th>
<th class="th">Strongly Agree</th>
</tr>
<tr>
<td class="first-col" class="td">14. The course was supported by adequate library resources.</td>
<td><input type="radio" value="none" name="supported" class="td" /></td>
<td><input type="radio" value="none" name="supported" class="td" /></td>
<td><input type="radio" value="none" name="supported" class="td" /></td>
<td><input type="radio" value="none" name="supported" class="td" /></td>
<td><input type="radio" value="none" name="supported" class="td" /></td>
</tr>
<tr>
<td class="first-col" class="td">15. Blackboard resources for the course were useful.</td>
<td><input type="radio" value="none" name="resources" class="td" /></td>
<td><input type="radio" value="none" name="resources" class="td" /></td>
<td><input type="radio" value="none" name="resources" class="td" /></td>
<td><input type="radio" value="none" name="resources" class="td" /></td>
<td><input type="radio" value="none" name="resources" class="td" /></td>
</tr>
<tr>
<td class="first-col" class="td">16. Instructor gave guidance on where to find resources.</td>
<td><input type="radio" value="none" name="guidance" class="td" /></td>
<td><input type="radio" value="none" name="guidance" class="td" /></td>
<td><input type="radio" value="none" name="guidance" class="td" /></td>
<td><input type="radio" value="none" name="guidance" class="td" /></td>
<td><input type="radio" value="none" name="guidance" class="td" /></td>
</tr>
</table>
</div>
<p class="spec comments">Comments</p>
<textarea rows="5"></textarea>
<h6>Additional question</h6>
<div class="additional-question">
<h5>Untitled</h5>
<table>
<tr>
<th class="first-col" class="th"></th>
<th class="th">Yes</th>
<th class="th">No</th>
</tr>
<tr>
<td class="first-col" class="td">17. The syllabus was explained at the beginning of the course.</td>
<td><input type="radio" value="none" name="syllabus" class="td" /></td>
<td><input type="radio" value="none" name="syllabus" class="td" /></td>
</tr>
<tr>
<td class="first-col" class="td">18. The course was delivered as outlined in the syllabus.</td>
<td><input type="radio" value="none" name="delivered" class="td" /></td>
<td><input type="radio" value="none" name="delivered" class="td" /></td>
</tr>
<tr>
<td class="first-col" class="td">19. Instructor explained the grading criteria of the course.</td>
<td><input type="radio" value="none" name="criteria" class="td" /></td>
<td><input type="radio" value="none" name="criteria" class="td" /></td>
</tr>
<tr>
<td class="first-col" class="td">20. Exams related to the course learning outcomes.</td>
<td><input type="radio" value="none" name="exams" class="td" /></td>
<td><input type="radio" value="none" name="exams" class="td" /></td>
</tr>
<tr>
<td class="first-col" class="td">21. Projects/ assignments related to the course learning outcomes.</td>
<td><input type="radio" value="none" name="assignments" class="td"/></td>
<td><input type="radio" value="none" name="assignments" class="td" /></td>
</tr>
</table>
</div>
<p class="spec comments">Comments</p>
<textarea rows="5"></textarea>
<h6>Overall experience</h6>
<p class="spec question">22. This was a worthwhile class</p>
<div class="question-answer">
<label><input type="radio" value="none" name="worthwhile" /> yes</label>
<label><input type="radio" value="none" name="worthwhile" /> no</label>
</div>
<p class="spec question">23. Would you recommend this course to a fellow student?</p>
<div class="question-answer">
<label><input type="radio" value="none" name="recommend" /> yes</label>
<label><input type="radio" value="none" name="recommend" /> no</label>
</div>
<div>
<h5>Untitled</h5>
<table>
<tr>
<th class="first-col" class="th"></th>
<th class="th">Poor</th>
<th class="th">Fair</th>
<th class="th">Good</th>
<th class="th">Very good</th>
<th class="th">Excellent</th>
</tr>
<tr>
<td class="first-col" class="td">24. Overall, how do you rate your experience in this course?</td>
<td><input type="radio" value="none" name="rate" class="td" /></td>
<td><input type="radio" value="none" name="rate" class="td" /></td>
<td><input type="radio" value="none" name="rate" class="td" /></td>
<td><input type="radio" value="none" name="rate" class="td" /></td>
<td><input type="radio" value="none" name="rate" class="td" /></td>
</tr>
</table>
</div>
<div class="course-rate">
<h5>Untitled</h5>
<table>
<tr>
<th class="th" class="first-col"></th>
<th class="th">A:0 – 4h</th>
<th class="th">B:5 – 8h</th>
<th class="th">C:9 – 12h</th>
<th class="th">C:9 – 12h</th>
</tr>
<tr>
<td class="first-col" class="td">25. Overall, how do you rate your experience in this course?</td>
<td><input type="radio" value="none" name="name" class="td" /></td>
<td><input type="radio" value="none" name="name" class="td" /></td>
<td><input type="radio" value="none" name="name" class="td" /></td>
<td><input type="radio" value="none" name="name" class="td" /></td>
</tr>
</table>
</div>
<p class="spec comments">Comments</p>
<textarea rows="5"></textarea>
<h6>Student self evaluation</h6>
<div>
<h5>Untitled</h5>
<table>
<tr>
<th class="first-col"></th>
<th>Strongly Disagree</th>
<th>Disagree</th>
<th>Neutral</th>
<th>Agree</th>
<th>Strongly Agree</th>
</tr>
<tr>
<td class="first-col" class="td">26. I contributed constructively during in-class activities</td>
<td><input type="radio" value="none" name="contributed" class="td" /></td>
<td><input type="radio" value="none" name="contributed" class="td" /></td>
<td><input type="radio" value="none" name="contributed" class="td" /></td>
<td><input type="radio" value="none" name="contributed" class="td" /></td>
<td><input type="radio" value="none" name="contributed" class="td" /></td>
</tr>
<tr>
<td class="first-col" class="td">27. I feel I am achieving the learning outcomes.</td>
<td><input type="radio" value="none" name="feel" class="td" /></td>
<td><input type="radio" value="none" name="feel" class="td" /></td>
<td><input type="radio" value="none" name="feel" class="td" /></td>
<td><input type="radio" value="none" name="feel" class="td" /></td>
<td><input type="radio" value="none" name="feel" class="td" /></td>
</tr>
</table>
</div>
<p class="spec comments">Comments</p>
<textarea rows="5"></textarea>
<h6>Comments on strengths and ways of improvement</h6>
<p class="spec comments">What changes would you recommend to improve this course?</p><textarea rows="5"></textarea>
<p class="spec comments">What did you like best about your instructors teaching?</p><textarea rows="5"></textarea>
<p class="spec comments">What did you like least about your instructor's teaching?</p><textarea rows="5"></textarea>
<p class="spec comments">Any further, constructive comment</p>
<textarea rows="5"></textarea>
<div class="btn-block">
<button class="btn-two" type="submit" class="input"s href="#">Send</button>
</div>
</form>
</div>
<style>
h4, h5 {font-weight: 400;}
h5 {margin: 2vw 0 0.4vw;}
h6 {text-transform: uppercase; color: #095484;}
.main-block {display: flex; justify-content: center; align-items: center; padding: 0.3vw;}
.two{width: 100%; max-width: 96vw; padding: 0vw 1vw; box-shadow: 0 0.2vw 0.5vw #ccc; background: lightgrey;}
.input {width: calc(100% - 1vw); padding: 0.5vw; border-radius: 0.3vw; border: 2px solid #ccc; vertical-align: middle;}
textarea {width: calc(100% - 6px); outline: none;}
input:hover, textarea:hover { outline: none; border: 1px solid #095484;}
.th, .td { width: 15%; padding: .5vw 0; border-bottom: 1px solid #ccc; text-align: center;vertical-align: unset; line-height: 1.8vw; font-weight: 400; word-break: break-all;}
.additional-question th, .additional-question td {width: 38%;}
.course-rate th, .course-rate td {width: 19%;}
.first-col, .additional-question .first-col, .course-rate .first-col {width: 24%; text-align: left;}
.question, .comments {margin: 1.5vw 0 0.5vw;}
.question-answer label {display: inline-block; padding: 0 2vw 1.5vw 0;}
.question-answer input {width: auto;}
.question-answer, table {width: 100%;}
.btn-block_{margin-top: 1vw; text-align: center;}
.btn-two { width: 15vw; padding: 1vw; border: none; border-radius: 0.5vw; background: #095484; font-size: 1.6vw; color: #fff; cursor: pointer; }
btn-two:hover {background: #0666a3;}
@media (min-width: 568px) {
th, td {word-break: keep-all;}
}
</style>